<template>
    <el-row>
        <page-header title="文章类别" />
        <page-main>
            <!-- 新增文章分类开始 -->
            <el-button type="primary" class="mb-20" @click="dialogFormVisible = true">新增文章分类</el-button>
            <!-- 新增文章分类结束 -->

            <!-- 表格开始 -->
            <el-table :data="tableData" border stripe style="width: 100%;">
                <el-table-column type="index" label="序号" width="50" />               
                <el-table-column prop="name" label="名称" />
                <el-table-column prop="address" label="别名" />                
                <el-table-column label="操作" width="100">
                    <template>
                        <el-button
                            type="text"
                            size="small"                            
                        >
                            编辑
                        </el-button>
                        <el-button 
                            type="text" 
                            size="small"                            
                        >
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 表格结束 -->

            <!-- 分页开始 -->
            <el-pagination
                class="hidden-md-and-down mt-20"
                :current-page="currentPage4"
                :page-sizes="[100, 200, 300, 400]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />

            <el-pagination
                class="hidden-lg-and-up mt-20"
                layout="prev, pager, next"
                :total="50"
            />            
            <!-- 分页结束 -->
        </page-main>

        <!-- 新增文章分类对话框开始 -->
        <el-dialog title="新增分类" width="30%" :visible.sync="dialogFormVisible">            
            <el-form :model="form" :label-position="top">
                <el-form-item label="分类名称:">
                    <el-input v-model="form.name" autocomplete="off" />
                </el-form-item>
                <el-form-item label="分类别名:">
                    <el-input v-model="form.name" autocomplete="off" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 新增文章分类对话框结束 -->
    </el-row>
</template>

<script>
export default {
    data() {
        return {
            options: [
                {
                    value: '选项1',
                    label: '黄金糕'
                },
                {
                    value: '选项2',
                    label: '双皮奶'
                },
                {
                    value: '选项3',
                    label: '蚵仔煎'
                },
                {
                    value: '选项4',
                    label: '龙须面'
                },
                {
                    value: '选项5',
                    label: '北京烤鸭'
                }
            ],
            value: '',
            tableData: [
                {
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                },
                {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                },
                {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }
            ],
            dialogFormVisible: false,
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            formLabelWidth: '120px'
        }
    },
    methods: {
        
    }
}
</script>
